<template>
  <div>
    <span class="c-title">{{ title }}</span>
    <div id="adminHomeChartLine" class="chart"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "AdminChartLine",

  props: {
    title: String,
    cdata: Array,
  },

  watch: {
    cdata(v) {
      this.chartInit(v);
    },
  },

  methods: {
    chartInit(data) {
      this.chartLineInit(data);
    },
    chartLineInit(data) {
      const c = echarts.init(document.getElementById("adminHomeChartLine"));
      c.setOption({
        animationDuration: 5000,
        color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
        tooltip: {
          trigger: "axis",
          formatter(v) {
            const [d] = v;
            const u = data[d.dataIndex].unit;
            return [
              `<div>${d.name}</div>`,
              `<div>${d.marker}${d.value} ${u || ""}</div>`,
            ].join("");
          },
        },
        xAxis: {
          type: "category",
          data: data.map((e) => e.time),
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data.map((e) => e.value),
            type: "line",
            // smooth: true,
            // lineStyle: {
            //   color: "#409eff",
            // },
          },
        ],
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 600px;
  height: 200px;
}
</style>